<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分销商品订单列表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
    <style>
        .fxOrderList-container {
            padding: 20px;
        }

        td[data-field="imgUrl"] div,
        td[data-field="negativeImgUrl"] div {
            height: 120px;
        }

        .lay-form {
            padding: 20px;
        }

        .fxOrderList-container {
            background-color: #fff;
        }

        .bar {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }

        .searchInput {
            display: flex;
            align-items: flex-end;
        }

        .searchInput input {
            width: 200px;
        }

        .searchInput .layui-form-label {
            padding: 9px 0;
        }

        .bar .layui-form-label {
            padding: 0;
            padding-bottom: 4px;
            text-align: left;
        }

        .bar .layui-inline {
            margin-right: 20px;
        }

        .layui-table img {
            max-width: 200px;
            object-fit: contain;
        }

        .layui-table-cell {
            height: auto;
        }

        #accountLayer .layui-form-label {
            width: 94px;
        }

        .layui-input-block {
            margin-left: 124px;
        }

        .upload {
            width: 150px;
            height: 150px;
            border: 1px solid #e8e8e8;
            text-align: center;
            overflow: hidden;
            position: relative;
        }

        .upload img {
            width: 100%;
        }

        .upload i {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
        }
    </style>
</head>

<body>
<div class="fxOrderList-container">
    <div class="fxOrderList-container">
        <div style="display: flex;align-items: center;font-size: 17px;"><i class="layui-icon layui-icon-left goBack"
                                                                           style="font-size: 30px; color: #333;"></i><span class="goBack">返回列表</span></div>
        <table lay-filter="fxOrderListTable" class="layui-hide" id="fxOrderListTable"></table>
    </div>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
<script src="../utils.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs {{ d.orderStatus*1 == 30000 || d.orderStatus*1 == 40000?'':'layui-btn-disabled'}}" lay-event="detail">查看详情</a>
    {{# if( (d.payType*1 == 5 || d.payType*1 == 6) && ( d.orderStatus*1 == 21000) ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="account">到账</a>
    {{# } }}
</script>
<script>
    function GetQueryString(arg) {
        var reg = new RegExp("(^|&)" + arg + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        }
        return null;
    };
    var pId = GetQueryString('pId');
    layui.use(['table', 'form', 'jquery', "laydate", "upload"], function() {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            $ = layui.jquery;
        form.render();
        table.render({
            elem: '#fxOrderListTable',
            url: window.baseUrl + '/distribution/getDistributionOrderList?pId='+pId,
            method: 'post',
            contentType: 'application/json',
            where : {'orderTypeList' : [2],'pId':pId},
            headers: {
                Authorization: localStorage.token
            },
            response: {
                statusCode: 200 //规定成功的状态码，默认：0
            },
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": 200,
                    "count": res.data.recordsTotal, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            request: {
                pageName: 'start' //页码的参数名称，默认：page
                ,
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            cols: [
                [{
                    field: 'orderNo',
                    title: '订单编号'
                },
                {
                   field: 'packageOrderNo',
                   title: '套餐包订单编号',
                    width: 80,
                },
                {field: "distributionName",
                    title: '分销商名称'
                }, {
                    field: 'rank',
                    title: '排名',
                    width: 50,
                    templet: function(res) {
                        vipName = res.vipOrders?res.vipOrders == 1?'  (优先排)':'':'';
                        rankName = res.rank ?res.rank :'-';
                        return rankName+vipName;
                    },
                    sort: true
                }, {
                    field: 'orderStatus',
                    title: '是否支付',
                    templet: function(res) {
                        return res.orderStatus == 40000 ? "已关单" : res.orderStatus == 30000?"已支付":"未支付";
                    }
                }, {
                    field: 'payType',
                    title: '支付方式',
                    templet: function(res) {
                        var payName = '-';
                        switch(res.payType * 1) {
                            case 1:
                                payName = '微信支付';
                                break;
                            case 2:
                                payName = '支付宝支付';
                                break;
                            case 3:
                                payName = '中级分红购买';
                                break;
                            case 4:
                                payName = '财富购买';
                                break;
                            case 5:
                                payName = '线下现金购买';
                                break;
                            case 6:
                                payName = '线下转账购买';
                                break;
                            case 7:
                                payName = '高级分红购买';
                                break;
                        }
                        return payName;
                    }
                }, {
                    field: "levelFlagQueue",
                    title: '当前级别',
                    templet: function(res) {
                        return res.levelFlagQueue == 'GAO_JI' ? '高级' : res.levelFlagQueue == 'ZHONG_JI'?'中级':res.levelFlagQueue == 'CHAO_GAO_JI'?"财富":'-';
                    }
                }, {
                    field: 'userName',
                    title: '购买人',
                    templet: function(res) {
                        return res.userName ? res.userName : '-'
                    }
                }, {
                    field: "userPhone",
                    title: '手机号'
                }, {
                    field: 'distributionOrderGoodsVo',
                    title: '价格（元）',
                    templet: function(res) {
                        return res.distributionOrderGoodsVo && res.distributionOrderGoodsVo.price ? res.distributionOrderGoodsVo.price : '-'
                    }
                }, {
                    field: 'receiptUrl',
                    title: '支付凭证',
                    templet: function(res) {
                        return res.receiptUrl?"<img style='width:100px; height:100px; object-fit: contain;' class='viewImg' src='" + res.receiptUrl + "'/>":"";
                    }
                }, {
                    field: "createTime",
                    title: '时间'
                }, {
                    title: '操作',
                    toolbar: '#barDemo'
                }]
            ],
            page: true,
            done: function() {
                // 放大图片
                $(".viewImg").on("click", function() {
                    let url = $(this).attr("src");
                    console.log(url)
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['auto'],
                        skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: "<img src='" + url + "'/>"
                    });
                })
            }
        });
        table.on('tool(fxOrderListTable)', function(obj) {
            var data = obj.data; //获得当前行数据
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail') { //查看
                if(data.orderStatus * 1 != 30000 && data.orderStatus * 1 != 40000) {
                    return false;
                }
                window.location.href = './getFxOrderDetail.html?id=' + data.id;
            }
        });

        laydate.render({
            elem: '#test1',
            range: true
        });
        $(".goBack").on('click', function () {
            window.history.go(-1);
        })
    });
</script>

</html>